﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta cache-control="no-cache" />
    <title>PC图片压缩处理</title>
    <script src="jquery-1.12.4.js"></script>
    <script type="text/javascript" src="pc-minImg.js"></script>
</head>

<body>
    <input type="file" id="fileImg" accept="image/*">

    <form>
        <img id="test" alt="">
    </form>

    <script>
        function handleFileSelect(evt) {

            var files = evt.target.files; //选择的文件
            //console.log(files[0]);
            for (var i = 0, f; f = files[i]; i++) {
                // Only process image files.
                if (!f.type.match('image.*')) {
                    continue;
                }

                var reader = new FileReader();

                reader.onload = (function(theFile) {
                    return function(event) {
                        var img = document.getElementById('test');
                        img.src = event.target.result;
                        $(img).css('width', $(img).width() + 'px');
                        var base = jic.compress(img).src;

                        var obj = base.split(','),
                            mime = obj[0].match(/:(.*?);/)[1], //获取类型
                            bstr = atob(obj[1]);
                        var n = bstr.length,
                            arr = new Array(n);
                        while (n--) {
                            arr[n] = bstr.charCodeAt(n);
                        }
                        var u8arr = new Uint8Array(arr);
                        var newb = new Blob([u8arr], {
                            type: mime
                        });
                        //console.log(newb);
                        var imgsrc = URL.createObjectURL(newb);
                        img.src = imgsrc;
                        //return imgsrc     
                    }
                })(f);
                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }
        document.getElementById("fileImg").addEventListener('change', handleFileSelect, false);
    </script>
</body>

</html>